<template>
  <div class="home-container">
    <div class="home-header">
      <div class="home-logo">
        <img src="../../../assets/images/jjxt/gz-home/login-logo.png" alt="" class="home-logo__img">
        <span class="home-logo__text">供电智能运维管理系统</span>
      </div>
      <div class="home-header-nav">
        <div
          v-for="(item, index) in computedNav.slice(0, 5)"
          :key="index"
          class="nav-item"
          @click="navTo(item.redirectUri, item)">{{ item.appName }}</div>
      </div>
      <div class="home-header-right">
        <!-- <div class="home-header-right-item hover pointer" @click="bigScreen">投屏展示</div> -->
        <div class="home-header-right-item hover pointer" @mouseenter="showDropdownMenu=true" @mouseleave="showDropdownMenu=false">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="right-item__person-name">
            投屏展示
          </span>
          <i class="right-item__person-arrow el-icon-caret-bottom" />
          <transition name="show-dropdown">
            <div v-show="showDropdownMenu" class="right-dropdown">
              <div class="right-dropdown-item menu_li" @click="openBigScreen('/power-supply-production')">供电安全生产信息</div>
              <div class="right-dropdown-item menu_li" @click="openBigScreen('/power-supply-gis')">供电安全生产指挥</div>
              <div class="right-dropdown-item menu_li" @click="openBigScreen('/power-supply-equipment')">供电设备故障预测与健康管理</div>
            </div>
          </transition>
        </div>
        <div class="home-header-right-item hover pointer" @mouseenter="showDropdown=true" @mouseleave="showDropdown=false">
          <i class="right-item__person-icon" />
          <span class="right-item__person-name">
            {{ `${userInfo.deptName}：${userInfo.username}` }}
          </span>
          <i class="right-item__person-arrow el-icon-caret-bottom" />
          <transition name="show-dropdown">
            <div v-show="showDropdown" class="right-dropdown">
              <div class="right-dropdown-item" @click="dialog.visible=true">修改密码</div>
            </div>
          </transition>
        </div>
        <div class="home-header-right-item hover pointer" @click="logout">
          <i class="right-item__exit-icon" />
          <span class="right-item__exit-text">系统退出</span>
        </div>
      </div>
    </div>
    <div class="home-content">
      <div class="home-content-left">
        <div v-border.corner class="content-days">
          <div class="days-line">
            <span class="title-text">无责任铁路交通事故</span>
            <span class="days-value">{{ safetyDays }}</span>
            <span class="days-unit">天</span>
          </div>
          <div class="days-line">
            <span class="title-text">值班领导</span>
            <span v-if="leader.length<15" class="days-leader">{{ leader }}</span>
            <span v-else class="days-leader"><marqueeLeft :lists="[leader]" /></span>
          </div>
        </div>
        <div v-border.corner class="content-risk-warning">
          <div class="risk-warning-title">
            <span class="title-text">风险预警</span>
            <div class="risk-warning-title-right">
              共<span style="color:#c7871e;padding: 0 5px;">{{ riskWarning.length }}</span>条
            </div>
          </div>
          <div ref="riskWarning" class="risk-warning-inner" @click="showRiskWarning($event)">
            <template v-if="riskWarning.length">
              <scroll
                :data="riskWarning"
                :class-option="{limitMoveNum: 6, step: riskWarningMoveNum > riskWarning.length ? 0 :0.5}"
                class="risk-seamless-scroll"
                style="height:100%;overflow:hidden;">
                <div
                  v-for="(item, index) in riskWarning"
                  :key="index"
                  ref="riskWarningItem"
                  :title="item.title.replace(/[<p>|<p/>]/g, '')"
                  class="risk-warning-item">
                  <img src="../../../assets/images/jjxt/gz-home/warning.png" alt="">
                  <p
                    class="risk-warning-item-text"
                    :data-list="riskWarning"
                    :data-index="index"
                    v-html="item.title.replace(/[<p>|<p/>]/g, '')" />
                </div>
              </scroll>
            </template>
            <template v-else>
              <div class="empty">暂无数据</div>
            </template>
          </div>
        </div>
        <!-- <div v-border.corner class="home-content-todo-list">
          <div class="home-content-title">
            <span class="title-text">待办事项</span>
          </div>
          <div class="todo-list-content">
            <template v-if="todoList.length">
              <el-scrollbar>
                <div
                  v-for="(item, index) in todoList"
                  :key="index"
                  :title="item.title"
                  class="todo-list-item"
                  @click="showTodoList(todoList, index)">{{ item.title }}</div>
              </el-scrollbar>
            </template>
            <template v-else>
              <div class="empty">暂无数据</div>
            </template>
          </div>
        </div> -->
        <!-- <div v-border.corner class="home-content-warning">
          <div class="home-content-title">
            <span class="title-text">预警提醒</span>
          </div>
          <div class="warning-content">
            <el-scrollbar>
              <template v-if="warningList.length">
                <div
                  v-for="(item, index) in warningList"
                  :key="index"
                  :title="item.profile"
                  class="warning-item">
                  <p class="warning-item__text">{{ item.profile }}</p>
                  <div class="warning-item__time">{{ parseTime(item.breakdownDate, '{y}-{m}-{d} {h}:{i}') }}</div>
                </div>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </el-scrollbar>
          </div>
        </div> -->
        <div v-border.corner class="home-content-notice">
          <div class="home-content-title">
            <span class="title-text">通知公告</span>
          </div>
          <div class="notice-content">
            <el-scrollbar>
              <template v-if="noticeList.length">
                <div
                  v-for="(item, index) in noticeList"
                  :key="index"
                  :title="item.title"
                  class="notice-item"
                  @click="showNotice(noticeList, index)">
                  <p class="notice-item__text">{{ item.title }}</p>
                  <div class="notice-item__time" style="width:80px;">{{ parseTime(item.noticeDate, '{y}-{m}-{d}') }}</div>
                </div>
              </template>
              <template v-if="keyworks.length">
                <div
                  v-for="(item, index) in keyworks"
                  :key="item.id"
                  :title="item.standard.replace(/[<p>|<p/>]/g, '')"
                  class="notice-item"
                  @click="showKeyworkList(keyworks, index)">
                  <p class="notice-item__text" v-html="'重点工作 ' + item.standard.replace(/[<p>|<p/>]/g, '')" />
                  <div v-if="item.updateTime" class="notice-item__time" style="width:80px;">{{ item.updateTime.substring(0, 10) }}</div>
                  <div v-else class="notice-item__time" style="width:80px;">{{ item.updateTime }}</div>
                </div>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </el-scrollbar>
          </div>
        </div>
        <div
          v-border
          class="home-content-power-supply"
          @mouseenter="showNav1=true"
          @mouseleave="showNav1=false">
          <span class="home-content-nav-title">供电系统导航</span>
          <i class="home-content-nav-icon el-icon-caret-bottom" />
          <transition name="nav-show">
            <div v-show="showNav1" class="home-content-nav-list">
              <div
                v-for="(item, index) in nav1"
                :key="index"
                class="home-content-nav-list-item"
                :style="{'border-width': index === nav1.length - 1 ? 0 : '2px'}"
                @click="navTo(item.appUrl, item)">
                {{ item.appName }}
              </div>
              <div class="nav-inner-title">
                <span class="home-content-nav-title">供电系统导航</span>
                <i class="home-content-nav-icon el-icon-caret-bottom" />
              </div>
            </div>
          </transition>
        </div>
        <div
          v-border
          class="home-content-application"
          @mouseenter="showNav2=true"
          @mouseleave="showNav2=false">
          <span class="home-content-nav-title">应用系统导航</span>
          <i class="home-content-nav-icon el-icon-caret-bottom" />
          <transition name="nav-show">
            <div v-show="showNav2" class="home-content-nav-list">
              <div
                v-for="(item, index) in nav2"
                :key="index"
                class="home-content-nav-list-item"
                :style="{'border-width': index === nav2.length - 1 ? 0 : '2px'}"
                @click="navTo(item.appUrl, item)">
                {{ item.appName }}
              </div>
              <div class="nav-inner-title">
                <span class="home-content-nav-title">应用系统导航</span>
                <i class="home-content-nav-icon el-icon-caret-bottom" />
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="home-content-right">
        <div class="home-content-right-line">
          <div class="content-trip">
            <div v-border.corner class="content-substation-trip">
              <div class="substation-trip-title">
                <span class="title-text">安全生产信息</span>
                <div class="substation-trip-subtitle">
                  <!-- 本月<span class="subtitle-value">{{ substationTrip.monthNum }}</span>起，累计<span class="subtitle-value">{{ substationTrip.todayNum }}</span>起 -->
                </div>
              </div>
              <div class="substation-trip-content">
                <scroll
                  :data="substationTrip.data"
                  :class-option="{limitMoveNum: 4, singleHeight: singleHeight, waitTime: 3000}"
                  class="substation-seamless-scroll"
                  style="height:100%;overflow:hidden;">
                  <div v-for="(item, index) in substationTrip.data" :key="index" class="substation-trip-item substation-trip-item-scroll" @click="handleToPage('/pspc/daily-screen', item)">
                    <div v-if="item.type == 1 || item.type == 2" class="substation-trip-item__text" :title="item.showContent">
                      {{ item.showContent }}
                    </div>
                    <div v-if="item.type == 3" class="substation-trip-item__text" :title="item.content">【其它情况】{{ item.content }}</div>
                    <!-- <div class="substation-trip-item__text">
                      {{ `${parseTime(item.tripTime, '{m}月{d}日 {h}:{i}')} ${item.lineName || ''} ${item.bdsAttr ? item.bdsAttr.bdsName : ''}${item.switchFlag}开关${item.desc || '跳闸'} ${item.handleStatus === 1 ? parseTime(item.handleDate, '{h}:{i} 复合成功') : ''} 故障里程:${formatRoad(item.roadMark[0])}` }}
                    </div>
                    <span
                      class="substation-trip-item__status"
                      :style="{background: item.handleStatus === 1 ? '#2ea15c' : (item.handleStatus === 2 ? '#f42929' : '#1168a4')}">
                      {{ item.handleStatus == 1 ? '复合成功' : (item.handleStatus === 2 ? '已定责' : '处理中') }}
                    </span> -->
                  </div>
                </scroll>
              </div>
            </div>
          </div>
          <!-- <div v-border.corner class="home-content-keywork">
            <div class="home-content-title">
              <span class="title-text">重点工作</span>
              <span class="title-right" @click="addKeywork"><i class="el-icon-plus" style="font-size:20px;" /></span>
            </div>
            <div class="keywork-content">
              <template v-if="keyworks.length">
                <el-scrollbar>
                  <div
                    v-for="(item, index) in keyworks"
                    :key="index"
                    :title="item.standard.replace(/[<p>|<p/>]/g, '')"
                    class="keywork-item"
                    @click="showKeyworkList(keyworks, index)">
                    <span class="keywork-item__num">{{ index+1 }}</span>
                    <p class="keywork-item__text" v-html="item.standard.replace(/[<p>|<p/>]/g, '')" />
                  </div>
                </el-scrollbar>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </div>
          </div> -->
          <div v-border.corner class="home-content-workbench">
            <div class="home-content-title">
              <span class="title-text">个人工作台</span>
            </div>
            <div class="workbench-content">
              <template v-if="workbenches.length">
                <!-- <el-scrollbar> -->
                <div
                  v-for="(item, index) in workbenches"
                  :key="index"
                  class="workbench-item"
                  :title="item.appAttr.appName"
                  @click="routeTo(item)">
                  <img :src="getImg(item)" alt="">
                  <p>{{ item.appAttr.appName }}</p>
                  <div class="workbench-item__delete" title="删除" @click="deleteWorkbenchApp($event, item)">
                    <i class="el-icon-circle-close-outline" />
                  </div>
                </div>
                <div class="workbench-item" @click="addWorkbench">
                  <i class="el-icon-plus" style="font-size:32px" />
                </div>
                <!-- </el-scrollbar> -->
              </template>
              <template v-else>
                <!-- <div class="empty">暂无数据</div> -->
                <div class="workbench-item" @click="addWorkbench">
                  <i class="el-icon-plus" style="font-size:32px" />
                </div>
              </template>
            </div>
          </div>
        </div>
        <div v-border.corner class="home-content-maintenance">
          <div class="maintenance-title">
            <div
              :class="['maintenance-title-item', {active: maintenance.active == 1}]"
              @mouseenter="maintenance.active = 1">
              <div style="width:20px;">维修天窗情况</div>
            </div>
            <div
              :class="['maintenance-title-item', {active: maintenance.active == 2}]"
              @mouseenter="maintenance.active = 2">
              <div style="width:20px;">施工天窗情况</div>
            </div>
          </div>
          <div class="maintenance-statistics">
            <div class="maintenance-statistics-title">{{ computedMaintenance.time }}</div>
            <div class="maintenance-statistics-thead">
              <div class="maintenance-statistics-td flex" />
              <div class="maintenance-statistics-td w60" style="color:#fff;">高铁</div>
              <div class="maintenance-statistics-td w60" style="color:#fff;">普铁</div>
              <div class="maintenance-statistics-td w40" />
            </div>
            <div class="maintenance-statistics-body">
              <div
                v-for="(item, index) in maintenance.statistics"
                :key="index"
                class="maintenance-statistics-tr">
                <div class="maintenance-statistics-td flex" style="padding-left:10px;">{{ item.name }}</div>
                <div class="maintenance-statistics-td w60">{{ computedMaintenance.count && computedMaintenance.count[0][item.highSpeed] }}</div>
                <div class="maintenance-statistics-td w60">{{ computedMaintenance.count && computedMaintenance.count[0][item.normalSpeed] }}</div>
                <div class="maintenance-statistics-td w40">{{ item.unit }}</div>
              </div>
            </div>
          </div>
          <div class="maintenance-detail">
            <div class="maintenance-detail-thead">
              <div class="maintenance-detail-td">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <div v-if="lines.length>0">
                    <el-checkbox v-model="checkAllLines" :indeterminate="isIndeterminateLines" style="margin-left: 24px;" @change="handleCheckAllLines">全选</el-checkbox>
                    <el-scrollbar>
                      <el-tree
                        ref="linesTree"
                        style="max-height:300px;"
                        :data="lines"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        highlight-current
                        :props="{ label: 'label', value: 'id', parent: 'parentId', children: 'children' }"
                        @check="changeLine" />
                      <div style="height:10px;" />
                    </el-scrollbar>
                  </div>
                  <div slot="reference">线别 <i class="el-icon-arrow-down" /></div>
                </el-popover>
              </div>
              <div class="maintenance-detail-td">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <div v-if="workAreaList.length>0">
                    <el-checkbox v-model="checkAllWorkArea" :indeterminate="isIndeterminateWorkArea" style="margin-left: 24px;" @change="handleCheckAllWorkArea">全选</el-checkbox>
                    <el-scrollbar>
                      <el-tree
                        ref="WorkAreaTree"
                        style="max-height:300px;"
                        :data="workAreaList"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        highlight-current
                        :props="{ label: 'deptName', value: 'deptCode', parent: 'parentId', children: 'children' }"
                        @check="changeWorkArea" />
                      <div style="height:60px;" />
                    </el-scrollbar>
                  </div>
                  <div slot="reference">工区 <i class="el-icon-arrow-down" /></div>
                </el-popover>
              </div>
              <div class="maintenance-detail-td">作业项目</div>
              <div class="maintenance-detail-td">作业地点</div>
              <div class="maintenance-detail-td">计划时间(分)</div>
              <div class="maintenance-detail-td width_110">状态</div>
            </div>
            <div class="maintenance-detail-body">
              <template v-if="computedMaintenance.list && computedMaintenance.list.length">
                <scroll
                  :data="computedMaintenance.list"
                  :class-option="{limitMoveNum: 6, step: 0.2}"
                  class="maintenance-seamless-scroll"
                  style="height:100%;overflow:hidden;">
                  <div
                    v-for="(item, index) in computedMaintenance.list"
                    :key="index"
                    class="maintenance-detail-tr"
                    @click="maintenanceDetail(item)">
                    <div class="maintenance-detail-td">{{ item.lineName }}</div>
                    <div class="maintenance-detail-td">{{ item.deptName }}</div>
                    <div class="maintenance-detail-td">
                      <div class="maintenance-detail-td-text" :title="item.workProject">
                        {{ item.workProject }}
                      </div>
                    </div>
                    <div class="maintenance-detail-td">
                      <div class="maintenance-detail-td-text" :title="item.workAddress">
                        {{ item.workAddress }}
                      </div>
                    </div>
                    <div v-if="item.planDate" class="maintenance-detail-td">
                      {{ item.planDate.substring(5, 6) === '0' ? item.planDate.substring(6, 11) : item.planDate.substring(5, 11) }}&nbsp;{{ item.workTime }}
                    </div>
                    <div v-else class="maintenance-detail-td">
                      {{ item.workTime }}
                    </div>
                    <div class="maintenance-detail-td width_110">
                      <span :style="{background: item.flowNodeStatus === -1 ? '#2ea15c' : '#1168a4'}">
                        {{ item.flowNodeText }}
                      </span>
                    </div>
                  </div>
                </scroll>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </div>
          </div>
        </div>
        <div class="home-content-bottom">
          <div v-border.corner class="home-content-repair-progress">
            <div class="home-content-title">
              <span class="title-text">维修进度</span>
            </div>
            <div class="repair-progress-content">
              <template v-if="repairProgress.length">
                <repair-progress
                  id="repair-progress"
                  class-name="repair-progress"
                  :data="repairProgress"
                  width="100%"
                  height="100%" />
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </div>
          </div>
          <div v-border.corner class="home-content-defect-grade">
            <div class="home-content-title">
              <span class="title-text">缺陷数量</span>
            </div>
            <div class="repair-defect-content">
              <template v-if="defectGrade.length">
                <defect-grade
                  id="defect-grade"
                  class-name="defect-grade"
                  :data="defectGrade"
                  width="100%"
                  height="100%" />
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <base-dialog
      class="home-pwd-dialog"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      @open="beforeOpenDialog"
      @updateData="updateData">
      <el-form ref="dataForm" :rules="dialog.rules" :model="dialog.form" label-width="140px">
        <el-row>
          <el-form-item label="旧密码：" prop="oldPwd">
            <el-input v-model="dialog.form.oldPwd" type="password" @paste.native.capture.prevent />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="新密码：" prop="newPwd">
            <el-input v-model="dialog.form.newPwd" type="password" @paste.native.capture.prevent />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="再次输入新密码：" prop="newPwdAgain">
            <el-input v-model="dialog.form.newPwdAgain" type="password" @paste.native.capture.prevent />
          </el-form-item>
        </el-row>
      </el-form>
    </base-dialog>
    <base-dialog
      width="90%"
      class="home-notice-dialog"
      :visible.sync="dialog1.visible"
      :title="`${dialog1.title}${getNoticeByIndex(dialog1.index).dicAttr ? ` / ${getNoticeByIndex(dialog1.index).dicAttr.dicKey}` : ''}`"
      :show-default-footer="false">
      <div class="notice-dialog__title">
        <p class="notice-dialog__title-text">{{ getNoticeByIndex(dialog1.index).title }}</p>
        <p class="notice-dialog__title-time">通知日期：{{ parseTime(getNoticeByIndex(dialog1.index).noticeDate, '{y}-{m}-{d}') }}</p>
      </div>
      <div class="notice-dialog__wrapper">
        <el-scrollbar v-if="getNoticeByIndex(dialog1.index).content">
          <div class="notice-dialog__text" v-html="getNoticeByIndex(dialog1.index).content" />
        </el-scrollbar>
      </div>
      <div slot="footer" class="notice-dialog__footer">
        <div class="notice-dialog__prev">
          <div class="notice-dialog__prev-text" :title="getNoticeByIndex(dialog1.index - 1).title">
            {{ getNoticeByIndex(dialog1.index - 1).title }}
          </div>
          <el-button
            type="text"
            class="notice-dialog__prev-btn"
            :disabled="!dialog1.index"
            @click="dialog1.index--">上一条</el-button>
        </div>
        <div class="notice-dialog__next">
          <el-button
            type="text"
            class="notice-dialog__next-btn"
            :disabled="dialog1.index === dialog1.list.length - 1"
            @click="dialog1.index++">下一条</el-button>
          <div class="notice-dialog__next-text" :title="getNoticeByIndex(dialog1.index + 1).title">
            {{ getNoticeByIndex(dialog1.index + 1).title }}
          </div>
        </div>
      </div>
    </base-dialog>
    <base-dialog
      width="90%"
      class="home-todo-list-dialog"
      :visible.sync="dialog2.visible"
      :title="dialog2.title"
      :show-default-footer="false">
      <div class="todo-list-dialog__title">
        <p class="todo-list-dialog__title-text">{{ getTodoByIndex(dialog2.index).title }}</p>
        <p class="todo-list-dialog__title-time">待办日期：{{ parseTime(getTodoByIndex(dialog2.index).todoDate, '{y}-{m}-{d}') }}</p>
      </div>
      <div class="todo-list-dialog__wrapper">
        <el-scrollbar>
          <div class="todo-list-dialog__text" v-html="getTodoByIndex(dialog2.index).content" />
        </el-scrollbar>
      </div>
      <div slot="footer" class="todo-list-dialog__footer">
        <div class="todo-list-dialog__prev">
          <div class="todo-list-dialog__prev-text" :title="getTodoByIndex(dialog2.index - 1).title">
            {{ getTodoByIndex(dialog2.index - 1).title }}
          </div>
          <el-button
            type="text"
            class="todo-list-dialog__prev-btn"
            :disabled="!dialog2.index"
            @click="dialog2.index--">上一条</el-button>
        </div>
        <div class="todo-list-dialog__next">
          <el-button
            type="text"
            class="todo-list-dialog__next-btn"
            :disabled="dialog2.index === dialog2.list.length - 1"
            @click="dialog2.index++">下一条</el-button>
          <div class="todo-list-dialog__next-text" :title="getTodoByIndex(dialog2.index + 1).title">
            {{ getTodoByIndex(dialog2.index + 1).title }}
          </div>
        </div>
      </div>
    </base-dialog>
    <base-dialog
      width="90%"
      class="home-keywork-dialog"
      :visible.sync="dialog3.visible"
      :title="dialog3.title"
      :show-default-footer="false">
      <div class="keywork-dialog__wrapper v-flex">
        <el-row>
          <el-col :span="8">
            督办部门：{{ getKeyworkByIndex(dialog3.index).superviseDept && getKeyworkByIndex(dialog3.index).superviseDept.deptName }}
          </el-col>
          <el-col :span="8">
            责任单位：{{ getKeyworkByIndex(dialog3.index).deptList && getKeyworkByIndex(dialog3.index).deptList.map(item => item.deptName).join(',') }}
          </el-col>
          <el-col :span="8">
            工作属性：{{ getKeyworkByIndex(dialog3.index).propertyText }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            布置时间：{{ parseTime(getKeyworkByIndex(dialog3.index).arrangeDate, '{y}-{m}-{d}') }}
          </el-col>
          <el-col :span="8">
            完成期限：{{ parseTime(getKeyworkByIndex(dialog3.index).limitDate, '{y}-{m}-{d}') }}
          </el-col>
        </el-row>
        <div class="keywork-dialog__content v-flex-elastic">
          <el-scrollbar>
            <div class="keywork-dialog__text" v-html="getKeyworkByIndex(dialog3.index).standard" />
          </el-scrollbar>
        </div>
      </div>
      <div slot="footer" class="keywork-dialog__footer">
        <div class="keywork-dialog__prev">
          <div
            class="keywork-dialog__prev-text"
            :title="getKeyworkByIndex(dialog3.index - 1).standard.replace(/[<p>|<p/>]/g, '')"
            v-html="getKeyworkByIndex(dialog3.index - 1).standard.replace(/[<p>|<p/>]/g, '')" />
          <el-button
            type="text"
            class="keywork-dialog__prev-btn"
            :disabled="!dialog3.index"
            @click="dialog3.index--">上一条</el-button>
        </div>
        <div class="keywork-dialog__next">
          <el-button
            type="text"
            class="keywork-dialog__next-btn"
            :disabled="dialog3.index === dialog3.list.length - 1"
            @click="dialog3.index++">下一条</el-button>
          <div
            class="keywork-dialog__next-text"
            :title="getKeyworkByIndex(dialog3.index + 1).standard.replace(/[<p>|<p/>]/g, '')"
            v-html="getKeyworkByIndex(dialog3.index + 1).standard.replace(/[<p>|<p/>]/g, '')" />
        </div>
      </div>
    </base-dialog>
    <base-dialog
      class="home-keywork-dialog1"
      width="65%"
      :visible.sync="dialog4.visible"
      :title="dialog4.title"
      :loading="dialog4.loading"
      :disabled="dialog4.disabled"
      @open="beforeOpenDialog1"
      @updateData="updateData1">
      <el-form
        ref="dataForm1"
        :rules="dialog4.rules"
        :model="dialog4.form"
        label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="督办部门" prop="superviseDept">
              <select-tree
                v-model="dialog4.form.superviseDept.deptId"
                node-click
                :options="depts"
                :props="{ label: 'label', value: 'id', parent: 'parentId', children: 'children' }"
                @nodeClick="changeDept"
                @clear="dialog4.form.superviseDept={}" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任单位" prop="deptList">
              <select-tree-multiple
                :data.sync="deptIds"
                :options="depts"
                @change="changeDeptList" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作属性" prop="property">
              <el-select v-model="dialog4.form.property">
                <el-option
                  v-for="item in propertys"
                  :key="item.id"
                  :label="item.dicKey"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="布置时间" prop="arrangeDate">
              <el-date-picker v-model="dialog4.form.arrangeDate" value-format="timestamp" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="完成期限" prop="limitDate">
              <el-date-picker v-model="dialog4.form.limitDate" value-format="timestamp" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="内容" prop="standard">
            <tinymce ref="tinymce" v-model="dialog4.form.standard" skin="oxide-dark" :height="400" />
          </el-form-item>
        </el-row>
      </el-form>
    </base-dialog>
    <base-dialog
      class="home-workbench-dialog"
      :visible.sync="dialog5.visible"
      :title="dialog5.title"
      :loading="dialog5.loading"
      @open="beforeOpenDialog2"
      @updateData="updateData2">

      <div class="workbench-dialog-content h-flex" style="max-height:100%">
        <div v-loading="!menuList.length" element-loading-background="rgba(18, 40, 84, 0.8)" class="workbench-menu v-flex">
          <el-input v-model="dialog5.filterTreeText" placeholder="输入关键字进行过滤" />
          <div class="workbench-menu-tree v-flex-elastic">
            <el-scrollbar>
              <el-tree
                ref="menuTree"
                :data="menuList"
                :props="treeProps"
                default-expand-all
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="chooseMenu" />
            </el-scrollbar>
          </div>
        </div>
        <div class="workbench-form h-flex-elastic">
          <el-form
            ref="dataForm2"
            :rules="dialog5.rules"
            :model="dialog5.form"
            label-width="50px">
            <el-row>
              <el-form-item label="图标">
                <el-select v-model="dialog5.form.icon">
                  <el-option v-for="(item, index) in icons" :key="item.value" :value="item.value">
                    <span style="float: left">{{ `图标${index + 1}（${item.value}）` }}</span>
                    <img style="float: right;width:20px;height:20px;margin-top:7px;" :src="item.img" alt="">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="名称">
                <el-input v-model="dialog5.form.content" disabled />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="地址">
                <el-input v-model="dialog5.form.url" disabled />
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
    </base-dialog>
    <workbench v-if="applicationCenter" @close="applicationCenter = false" @renew="getWorkBench()" />
    <base-dialog
      v-if="dialog6.list[dialog6.index]"
      width="90%"
      class="home-todo-list-dialog"
      :visible.sync="dialog6.visible"
      :title="dialog6.title"
      :show-default-footer="false">
      <div class="todo-list-dialog__title">
        <p class="todo-list-dialog__title-text">{{ getRiskWarning(dialog6.index).title }}</p>
        <p class="todo-list-dialog__title-time">下发日期：{{ parseTime(getRiskWarning(dialog6.index).updateTime, '{y}-{m}-{d}') }}</p>
      </div>
      <div class="todo-list-dialog__wrapper">
        <el-scrollbar>
          <div class="todo-list-dialog__text" v-html="getRiskWarning(dialog6.index).detail" />
        </el-scrollbar>
      </div>
      <div v-if="getRiskWarning(dialog6.index).attachments.length" class="file-down" @click="handleDownload(getRiskWarning(dialog6.index))">附件下载 <i class="el-icon-download" type="small" /></div>
      <div slot="footer" class="todo-list-dialog__footer">
        <div class="todo-list-dialog__prev">
          <div class="todo-list-dialog__prev-text" :title="getRiskWarning(dialog6.index - 1).title">
            {{ getRiskWarning(dialog6.index - 1).title }}
          </div>
          <el-button
            type="text"
            class="todo-list-dialog__prev-btn"
            :disabled="!dialog6.index"
            @click="dialog6.index--">上一条</el-button>
        </div>
        <div class="todo-list-dialog__next">
          <el-button
            type="text"
            class="todo-list-dialog__next-btn"
            :disabled="dialog6.index === dialog6.list.length - 1"
            @click="dialog6.index++">下一条</el-button>
          <div class="todo-list-dialog__next-text" :title="getRiskWarning(dialog6.index + 1).title">
            {{ getRiskWarning(dialog6.index + 1).title }}
          </div>
        </div>
      </div>
    </base-dialog>
    <transition name="gis-fade">
      <div v-if="nLink" class="nlink-container">
        <div class="nlink-shadow" @click="maintenanceDetail" />
        <div class="nlink">
          <button type="button" aria-label="Close" class="el-dialog__headerbtn gis-close-button">
            <i class="el-icon-close" @click="maintenanceDetail" />
          </button>
          <DataReview top="0px" :skylight-complete-flag="nLinkFlag" :plan-id="nLinkPlanId" :range-params="nLinkRangeParams" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { logout } from '@/api/main'
import { getToken, getUserInfo } from '@/utils/auth'
import { jumpToLogin } from '@/utils/public'
import { changePwd } from '@/api/gz-home/dsc/system/user'
import { parseTime } from '@/utils'
import { isExternal } from '@/utils/validate'
import Scroll from 'vue-seamless-scroll'
import {
  getTodoList,
  getEarlyWarning,
  getNotice,
  getKeyWork1,
  getWorkBench,
  getRepairSkylight,
  getConstructionSkylight,
  getRepairCount,
  getWorkAreaList,
  getDefect,
  getDaily,
  getLeader,
  findWorkAreaByLine,
  getRoleLink,
  getLoginUserIdPath
} from '@/api/gz-home/home'
import { getListTree as departmentList } from '@/api/gz-home/dsc/system/department'
import { getListByTypeCode } from '@/api/gz-home/dsc/system/dictionary/general'
import { updateData as addKeywork } from '@/api/gz-home/dsc/system/supervise'
import { getListTree as getMenuList } from '@/api/gz-home/dsc/system/menu'
import { updateData as addWorkbench, deleteData as deleteWorkbench, deleteWorkBenchApp } from '@/api/gz-home/dsc/system/workbench'
import RepairProgress from './charts/RepairProgress'
import DefectGrade from './charts/defect-grade'
import Tinymce from '@/components/Tinymce'
// import DataReview from 'pspc/src/views/pspc/construction/DataReview'
import Workbench from './Workbench'

import { getSafeDays } from '@/api/gz-home/dsc/system/safety-days'
import Socket from '@/utils/socket'
import { lineList } from '@/api/gz-home/dsc/location-area-info/line'
import marqueeLeft from '@/components/MarqueeLeft'
import axios from 'axios'
import { downloadFile } from '@/utils/public'
export default {
  name: 'Home',
  components: { DefectGrade, RepairProgress, Tinymce,
    // DataReview,
    Scroll, marqueeLeft, Workbench },
  directives: {
    border: {
      inserted(el, binding) {
        el.style.cssText = 'border: 2px solid #152e55; border-radius: 9px;background: rgba(21, 46, 85, 0.3);'

        if (!binding.modifiers.corner) return
        const position = window.getComputedStyle(el).position
        if (!position || position === 'static') {
          el.style.position = 'relative'
        }

        const img = require('../../../assets/images/jjxt/gz-home/home-block-corner.png')
        const ltCorner = document.createElement('img')
        ltCorner.src = img
        ltCorner.style.cssText = `position: absolute; left: -2px; top: -2px;`
        el.appendChild(ltCorner)

        const rtCorner = document.createElement('img')
        rtCorner.src = img
        rtCorner.style.cssText = `position: absolute; right: -2px; top: -2px; transform: rotate(90deg);`
        el.appendChild(rtCorner)

        const rbCorner = document.createElement('img')
        rbCorner.src = img
        rbCorner.style.cssText = `position: absolute; right: -2px; bottom: -2px; transform: rotate(180deg);`
        el.appendChild(rbCorner)

        const lbCorner = document.createElement('img')
        lbCorner.src = img
        lbCorner.style.cssText = `position: absolute; left: -2px; bottom: -2px; transform: rotate(-90deg);`
        el.appendChild(lbCorner)
      }
    }
  },
  data() {
    return {
      singleHeight: 50,
      userIdPath: '',
      leader: '',
      isChangeQuery: false,
      isIndeterminateWorkArea: true,
      isIndeterminateLines: true,
      checkAllLines: false, // 线路选择所有
      checkAllWorkArea: false, // 工区选择所有
      workAreaList: [],
      listQuery: {
        deptCodeArr: [],
        lineCodeArr: []
      },
      lines: [],
      riskWarningMoveNum: 0,
      riskWarning: [],
      substationTrip: {},
      electricityTrip: [
        {
          text: '4月21日15:08 [雷雨广珠城际线金唐变电所211开关跳闸 15:08复合成功     故障里程: K95+459',
          status: 12
        }
      ],
      safetyDays: 0,
      zoom: document.body.clientWidth / 1920,
      navs: [
        // { appName: '检修管理系统', redirectUri: `http://10.169.27.23:90/backend/pages/go_power_rel.html?powerUserId=` }
      ],
      queryForm: {
        page: 1,
        size: 10
      },
      todoList: [],
      warningList: [],
      noticeList: [],
      showNav1: false,
      nav1: [],
      showNav2: false,
      nav2: [],
      keyworks: [],
      workbenches: [],
      maintenance: {
        active: 1,
        statistics: [
          { name: '天窗申请', highSpeed: 'gtTotal', normalSpeed: 'ptTotal', unit: '个' },
          { name: '批复', highSpeed: 'gtPifu', normalSpeed: 'ptPifu', unit: '个' },
          { name: '给点', highSpeed: 'gtGeidian', normalSpeed: 'ptGeidian', unit: '个' },
          { name: '申请时间', highSpeed: 'gtApplyTime', normalSpeed: 'ptApplyTime', unit: '分钟' },
          { name: '行调给点', highSpeed: 'gtXingdiao', normalSpeed: 'ptXingdiao', unit: '分钟' },
          { name: '检修时间', highSpeed: 'gtWorkMinutes', normalSpeed: 'ptWorkMinutes', unit: '分钟' }
        ],
        repair: [],
        construction: []
      },
      repairProgress: [],
      defectGrade: [],
      showDropdown: false,
      showDropdownMenu: false,
      dialog: {
        title: '修改密码',
        visible: false,
        loading: false,
        form: {},
        rules: {
          oldPwd: [
            { required: true, message: '必填', trigger: 'blur' },
            { min: 5, message: '大于5个字符', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_@]+$/, message: '密码只允许字母、数字、下划线、@', trigger: 'blur' }
          ],
          newPwdAgain: [
            { required: true, message: '必填', trigger: 'blur' },
            { min: 5, message: '大于5个字符', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_@]+$/, message: '密码只允许字母、数字、下划线、@', trigger: 'blur' }
          ],
          newPwd: [
            { required: true, message: '必填', trigger: 'blur' },
            { min: 5, message: '大于5个字符', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_@]+$/, message: '密码只允许字母、数字、下划线、@', trigger: 'blur' }
          ]
        }
      },
      dialog1: {
        title: '',
        visible: false,
        list: [],
        index: 0
      },
      dialog2: {
        title: '',
        visible: false,
        list: [],
        index: 0
      },
      dialog3: {
        title: '',
        visible: false,
        list: [],
        index: 0
      },
      dialog4: {
        title: '',
        visible: false,
        loading: false,
        form: {
          superviseDept: {},
          deptList: []
        },
        initForm: {
          superviseDept: {},
          deptList: [],
          type: 4,
          level: 3,
          delFlag: 0,
          status: 1
        },
        rules: {}
      },
      dialog5: {
        title: '',
        visible: false,
        loading: false,
        form: {
          delFlag: 0,
          status: 1
        },
        rules: {}
      },
      applicationCenter: false, // 应用中心开关
      dialog6: {
        title: '',
        visible: false,
        list: [],
        index: 0
      },
      treeProps: {
        disabled: data => {
          return !!data.children.length || (data.obj && !data.obj.status)
        }
      },
      depts: [],
      propertys: [],
      menuList: [],
      icons: [
        { value: 'work-bench-bg', img: require('@/assets/images/jjxt/gz-home/work-bench-bg.png') },
        { value: 'work-bench-dd', img: require('@/assets/images/jjxt/gz-home/work-bench-dd.png') },
        { value: 'work-bench-hf', img: require('@/assets/images/jjxt/gz-home/work-bench-hf.png') },
        { value: 'work-bench-jh', img: require('@/assets/images/jjxt/gz-home/work-bench-jh.png') },
        { value: 'work-bench-kb', img: require('@/assets/images/jjxt/gz-home/work-bench-kb.png') },
        { value: 'work-bench-tc', img: require('@/assets/images/jjxt/gz-home/work-bench-tc.png') },
        { value: 'work-bench-zh', img: require('@/assets/images/jjxt/gz-home/work-bench-zh.png') }
      ],
      parseTime: parseTime,
      nLink: false,
      nLinkFlag: -1,
      nLinkPlanId: '',
      nLinkRangeParams: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    computedNav() {
      return this.navs.filter(item => !item.appCode || (item.appCode && this.userInfo.appCodes && this.userInfo.appCodes.includes(item.appCode)))
    },
    computedMaintenance() {
      return this.maintenance.active === 1 ? this.maintenance.repair : this.maintenance.construction
    },
    deptIds: {
      get() {
        return this.dialog4.form.deptList.map(item => item.deptId)
      },
      set() {}
    }
  },
  watch: {
    'dialog5.filterTreeText'(val) {
      this.$refs.menuTree.filter(val)
    }
  },
  created() {
    this.getLoginUserIdPath()
    window._axiosPromiseArr = []
    this.getSafeDays()
    this.initSocket()
    this.getTodoList()
    this.getEarlyWarning()
    this.getNotice()
    this.getKeyWork()
    this.getWorkBench()
    this.getRepairSkylight()
    this.getConstructionSkylight()
    this.getRepairCount()
    this.getList()
    this.getLineList()
    this.getWorkAreaList()
    this.getDefect()
    this.getDaily()
    this.getLeader()
    this.getRoleMenu()
    this.getRoleLink()
  },
  beforeDestroy() {
    this.socket.close()
    this.socket1.close()
    this.socket2.close()
  },
  methods: {
    handleDownload(item) {
      var params = {
        url: item.attachments[0].path,
        fileName: item.attachments[0].fileName
      }
      downloadFile(params).then((response) => {})
    },
    getRoleMenu() {
      var resData = [
        {
          '_id': 'c7538937012d4d71b8561e4d9ece4c88',
          'platformId': 'cd2aca6b2bb44e52be41a480c420218d',
          'appName': '供电设备履历系统',
          'appCode': 'DSC',
          'appVersion': '1',
          'desc': '供电设备履历系统',
          'clientId': 'cdtye-itps-dsc-client',
          'clientSecret': 'cdtye2019',
          'redirectUri': '/dsc/welcome',
          'isDisplay': 1,
          'orderNum': 2,
          'status': 1,
          'delFlag': 0,
          'updateTime': 1608645077166
        },
        {
          '_id': '71e27df47e3547ef95a0423a4269972d',
          'platformId': 'cd2aca6b2bb44e52be41a480c420218d',
          'appName': '供电安全生产指挥',
          'appCode': 'PSPC',
          'appVersion': '1.0',
          'desc': '供电安全生产指挥',
          'clientId': 'cdtye-itps-pspc-client',
          'clientSecret': 'cdtye2019',
          'redirectUri': '/pspc/gis-index',
          'isDisplay': 1,
          'orderNum': 1,
          'status': 1,
          'delFlag': 0,
          'createTime': 1564733664000,
          'updateTime': 1606799041388
        },
        {
          '_id': 'bf2a583f40d941edad171d35d51f4ac5',
          'platformId': 'cd2aca6b2bb44e52be41a480c420218d',
          'appName': '6C检测监测',
          'appCode': 'CMS',
          'appVersion': '1.0.0.0',
          'desc': '',
          'clientId': 'cdtye-itps-psim-client',
          'redirectUri': '/cms/defect-statistics',
          'isDisplay': 1,
          'orderNum': 4,
          'status': 1,
          'delFlag': 0,
          'createTime': 1595562684000,
          'updateTime': 1606799018605
        },
        {
          '_id': '4a2374eaaadf4075894bf0be5def5a22',
          'platformId': 'cd2aca6b2bb44e52be41a480c420218d',
          'appName': '接触网健康故障预测',
          'appCode': 'PHM',
          'appVersion': '1.0',
          'desc': '接触网健康故障预测',
          'clientId': 'cdtye-itps-phm-client',
          'redirectUri': '/phm/welcome',
          'isDisplay': 1,
          'orderNum': 3,
          'status': 1,
          'delFlag': 0,
          'createTime': 1564733625000,
          'updateTime': 1608645083331
        }
      ]
      this.navs = resData
      // getRoleMenu().then((response) => {
      //   this.navs = response.data
      // })
    },
    getRoleLink() {
      getRoleLink().then((response) => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].linkType === 1) {
            this.nav1.push(resData[i])
          } else {
            this.nav2.push(resData[i])
          }
        }
      })
    },
    getLeader() {
      getLeader().then((response) => {
        if (response.data) {
          this.leader = response.data
        } else if (response.message) {
          this.leader = response.message
        }
      })
    },
    // 跳转缺陷页
    handleToPage(url, param) {
      if (param) {
        var startTime = param.startTime.substring(0, 10)
        var endTime = param.endTime.substring(0, 10)
        var pageUrl = url + '?startTime=' + startTime + '&endTime=' + endTime + '&id=' + param.id
        window.open(pageUrl)
      } else {
        window.open(url)
      }
    },
    // 隐藏显示
    popoverHide() {
      window._axiosPromiseArr.forEach((ele, index) => {
        ele.cancel()
        delete window._axiosPromiseArr[index]
      })
      if (this.isChangeQuery) {
        this.isChangeQuery = false
        var CancelToken = axios.CancelToken
        var source = CancelToken.source()
        axios.defaults.headers['Authorization'] = 'Bearer ' + getToken()
        axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
        axios.interceptors.request.use(
          config => {
            config.cancelToken = new axios.CancelToken(cancel => {
              window._axiosPromiseArr.push({ cancel })
            })
            return config
          }
        )
        var param = {
          deptCodes: this.listQuery.deptCodeArr.join(','),
          lineCodes: this.listQuery.lineCodeArr.join(',')
        }
        var userInfo = getUserInfo()
        var pspcDeploy = ['gz', 'sz', 'cs', 'hk', 'hy', 'hh'] // pspc 目前部署单位
        var replaceName = '/pspcgz' // 非六个段取值 pspcgz
        if (userInfo && (pspcDeploy.indexOf(userInfo.abbreviation) !== -1)) {
          replaceName = '/pspc' + userInfo.abbreviation // 获取当前登录人所在单位标识abbreviation
        }
        axios.get(process.env.VUE_APP_BASE_API + replaceName + '/bigScreen/getRepair', { params: { ...param }}, {
          cancelToken: source.token
        }).then((response) => { this.maintenance.repair = response.data.data })
        axios.get(process.env.VUE_APP_BASE_API + replaceName + '/bigScreen/getWork', { params: { ...param }}, {
          cancelToken: source.token
        }).then((response) => { this.maintenance.construction = response.data.data })
      }
    },
    // 选择工区
    changeDeptCode(e) {
      this.listQuery.deptCode = e
    },
    // 全选/反选线路
    handleCheckAllLines(val) {
      this.isChangeQuery = true
      this.listQuery.lineCodeArr = []
      if (val) {
        // 全选
        this.$refs.linesTree.setCheckedNodes(this.lines)
        for (var i in this.lines) {
          this.listQuery.lineCodeArr.push(this.lines[i].obj.lineCode)
        }
      } else {
        // 取消选中
        this.$refs.linesTree.setCheckedKeys([])
      }
      this.isIndeterminateLines = false
      this.popoverHide()
    },
    handleCheckAllWorkArea(val) {
      this.isChangeQuery = true
      this.listQuery.deptCodeArr = []
      if (val) {
        // 全选
        this.$refs.WorkAreaTree.setCheckedNodes(this.workAreaList)
        for (var i in this.workAreaList) {
          this.listQuery.deptCodeArr.push(this.workAreaList[i].deptCode)
        }
      } else {
        // 取消选中
        this.$refs.WorkAreaTree.setCheckedKeys([])
      }
      this.isIndeterminateWorkArea = false
      this.popoverHide()
    },
    //   选择线路
    changeLine(data) {
      findWorkAreaByLine({ lineCode: data.obj.lineCode }).then((response) => {
        this.workAreaList = response.data
      })
      this.isChangeQuery = true
      if (this.listQuery.lineCodeArr.indexOf(data.obj.lineCode) === -1) {
        this.listQuery.lineCodeArr.push(data.obj.lineCode)
      } else {
        for (var i in this.listQuery.lineCodeArr) {
          if (this.listQuery.lineCodeArr[i] === data.obj.lineCode) {
            this.listQuery.lineCodeArr.splice(i, 1)
          }
        }
      }
      this.checkAllLines = this.listQuery.lineCodeArr.length === this.lines.length
      this.isIndeterminateLines = this.listQuery.lineCodeArr.length > 0 && this.listQuery.lineCodeArr.length < this.lines.length
      this.popoverHide()
    },
    changeWorkArea(data) {
      this.isChangeQuery = true
      if (this.listQuery.deptCodeArr.indexOf(data.deptCode) === -1) {
        this.listQuery.deptCodeArr.push(data.deptCode)
      } else {
        for (var i in this.listQuery.deptCodeArr) {
          if (this.listQuery.deptCodeArr[i] === data.deptCode) {
            this.listQuery.deptCodeArr.splice(i, 1)
          }
        }
      }
      this.checkAllWorkArea = this.listQuery.deptCodeArr.length === this.workAreaList.length
      this.isIndeterminateWorkArea = this.listQuery.deptCodeArr.length > 0 && this.listQuery.deptCodeArr.length < this.workAreaList.length
      this.popoverHide()
    },
    getDaily() {
      getDaily().then((response) => {
        for (var i in response.data) {
          if (response.data[i].type !== 3) {
            var type = ''
            if (response.data[i].type === 1) {
              type = '【变电跳闸】'
            } else if (response.data[i].type === 2) {
              type = '【电力跳闸】'
            }
            var tripTime = ''
            if (response.data[i].content.tripTime) {
              tripTime = response.data[i].content.tripTime + '，'
            }
            var bdsAction = ''
            if (response.data[i].content.bdsAttr) {
              bdsAction = response.data[i].content.bdsAttr.bdsName + '，'
            }
            var wTypeName = ''
            if (response.data[i].content.weatherTypeAttr.wTypeName) {
              wTypeName = '天气：' + response.data[i].content.weatherTypeAttr.wTypeName + '；'
            }
            var influenceTrain = ''
            if (response.data[i].content.influenceTrain) {
              influenceTrain = '影响范围：' + response.data[i].content.influenceTrain + '。'
            }
            var protectTypeFullNamet = ''
            if (response.data[i].content.protectTypeAttr.protectTypeFullName) {
              shortCurrent = response.data[i].content.protectTypeAttr.protectTypeFullNamet
            }
            var shortCurrent = ''
            if (response.data[i].content.shortCurrent) {
              shortCurrent = '电流：' + response.data[i].content.shortCurrent + 'A，'
            }
            var shortVoltage = ''
            if (response.data[i].content.shortVoltage) {
              shortVoltage = '电压：' + response.data[i].content.shortVoltage + 'kv,'
            }
            var impedance = ''
            if (response.data[i].content.impedance) {
              impedance = '阻抗值：' + response.data[i].content.impedance + 'Ω，'
            }
            var impedanceAngle = ''
            if (response.data[i].content.impedanceAngle) {
              impedanceAngle = '阻抗角' + response.data[i].content.impedanceAngle + '°；'
            }
            var bidForRoadMark = ''
            if (response.data[i].content.bidForRoadMark) {
              bidForRoadMark = '故测距离：' + response.data[i].content.bidForRoadMark + 'km'
            }
            response.data[i].showContent = type + tripTime + bdsAction + wTypeName + influenceTrain + protectTypeFullNamet + shortCurrent + shortVoltage + impedance + impedanceAngle + bidForRoadMark
          }
        }
        this.substationTrip = response
        this.$nextTick(() => {
          this.singleHeight = document.getElementsByClassName('substation-trip-item-scroll')[0].clientHeight
        })
      })
    },
    getDefect() {
      // const date = new Date()
      // const param = { month: parseTime(date, '{y}-{m}'), year: parseTime(date, '{y}') }
      getDefect().then((response) => {
        this.defectGrade = [
          { name: '一级', total: response.data.yearOneNum },
          { name: '二级', total: response.data.yearTwoNum }
        ]
      })
    },
    getWorkAreaList() {
      getWorkAreaList().then((response) => {
        this.workAreaList = response.data
      })
    },
    getLineList() {
      lineList().then((response) => {
        this.lines = response.data
      })
    },
    // 获取登入人的idPath，最多只精确到段
    getLoginUserIdPath() {
      getLoginUserIdPath().then((response) => {
        this.userIdPath = response.data
      })
    },
    initSocket() {
      this.socket = new Socket()
      this.socket.open()

      this.socket.addEventListener('onopen', _ => {
        this.socket.sendMessage('PAGE_PRODUCE')
      })
      this.socket.addEventListener('PAGE_PRODUCE', data => {
        switch (data.key) {
          case 'MANAGEMENT':
            this.securityInfo = Object.freeze(data.datas)
            break
          case 'DEFECT_INFO_TODAY':
            this.equipmentDefect = Object.freeze(data.datas)
            break
          case 'KEYWORK':
            this.keyWork = Object.freeze(data.datas)
            break
        }
      })

      var userInfo = getUserInfo()
      var replaceName = 'pspcgz' // 非六个段取值 pspcgz
      var pspcDeploy = ['gz', 'sz', 'cs', 'hk', 'hy', 'hh'] // pspc 目前部署单位
      if (userInfo && (pspcDeploy.indexOf(userInfo.abbreviation) !== -1)) {
        replaceName = 'pspc' + userInfo.abbreviation // 获取当前登录人所在单位标识abbreviation
      }
      this.socket1 = new Socket(replaceName)
      // this.socket1 = new Socket('pspc')
      this.socket1.open()

      this.socket1.addEventListener('onopen', _ => {
        this.socket1.sendMessage('PAGE_PRODUCE')
      })
      this.socket1.addEventListener('PAGE_PRODUCE', data => {
        switch (data.key) {
          case 'REPAIR_SKYLIGHT':
            this.maintenance.repair = Object.freeze(data.datas)
            break
          case 'WORK_SKYLIGHT':
            this.maintenance.construction = Object.freeze(data.datas)
            break
        }
      })

      this.socket2 = new Socket()
      this.socket2.open()

      this.socket2.addEventListener('onopen', _ => {
        this.socket2.sendMessage('PAGE_HEALTH')
      })
      this.socket2.addEventListener('PAGE_HEALTH', data => {
        switch (data.key) {
          case 'WARNING':
            var tempArr = []
            for (var i in data.datas) {
              for (var j in data.datas[i].units) {
                if (data.datas[i].units[j].idPath === this.userIdPath) {
                  tempArr.unshift(data.datas[i])
                }
              }
            }
            this.riskWarning = tempArr
            // this.riskWarning = Object.freeze(data.datas)
            this.$nextTick(_ => {
              if (this.$refs.riskWarningItem && this.$refs.riskWarningItem[0] && this.$refs.riskWarningItem[0].parentNode.offsetHeight > this.$refs.riskWarning.offsetHeight) {
                this.riskWarningMoveNum = this.riskWarning.length
              } else {
                this.riskWarningMoveNum = Math.floor(this.$refs.riskWarning.offsetHeight / 40)
              }
            })
            break
        }
      })
    },
    navTo(path, item) {
      if (!path) {
        this.notifiyInfo('此功能暂未开发，敬请期待！')
        return true
      }
      if (item.name === '检修管理系统') {
        path += this.userInfo.id
      }
      if (item.appCode === 'SCJY') {
        path = path + '?powerUserId=' + this.userInfo.id
      }
      path && window.open(path)
    },
    routeTo(item) {
      if (!item.appAttr.appUrlAttrList[0].redirectUri || item.appAttr.appUrlAttrList[0].redirectUri === '/') {
        this.notifiyInfo('此功能在开发中，敬请期待！')
        return
      }
      var redirectUri = ''
      if (item.appAttr.appUrlAttrList[0].redirectUri.indexOf('/module') !== -1) {
        localStorage.setItem('appId', item.appAttr.id)
        localStorage.setItem('appName', item.appAttr.appName)
        redirectUri = `${item.appAttr.appUrlAttrList[0].redirectUri}`
      } else {
        redirectUri = item.appAttr.appUrlAttrList[0].redirectUri
      }
      if (item.appAttr.target === 'iframe') {
        window.location.assign(redirectUri)
      } else {
        window.open(redirectUri)
      }
    },
    openBigScreen(url) {
      window.open(url)
    },
    bigScreen() {
      window.open('/power-supply-production')
      window.open('/power-supply-gis')
      window.open('/power-supply-equipment')
    },
    getSafeDays() {
      getSafeDays().then(response => {
        this.safetyDays = response.data.days || 0
      })
    },
    // 待办事项
    getTodoList() {
      getTodoList(this.queryForm).then(response => {
        this.todoList = Object.freeze(response.data.records)
      })
    },
    // 预警提醒
    getEarlyWarning() {
      getEarlyWarning(this.queryForm).then(response => {
        this.warningList = Object.freeze(response.data.records)
      })
    },
    // 通知公告
    getNotice() {
      getNotice(this.queryForm).then(response => {
        this.noticeList = Object.freeze(response.data.records)
      })
    },
    // 重点工作
    getKeyWork() {
      getKeyWork1(this.queryForm).then(response => {
        this.keyworks = Object.freeze(response.data.records)
      })
    },
    // 个人工作台
    getWorkBench() {
      this.queryForm.type = 1
      getWorkBench(this.queryForm).then(response => {
        this.workbenches = Object.freeze(response.data)
      })
    },
    // 维修天窗
    getRepairSkylight() {
      getRepairSkylight().then(response => {
        this.maintenance.repair = Object.freeze(response.data)
      })
    },
    // 施工天窗
    getConstructionSkylight() {
      getConstructionSkylight().then(response => {
        this.maintenance.construction = Object.freeze(response.data)
      })
    },
    maintenanceDetail(item) {
      if (this.nLink) this.nLink = false
      else {
        this.nLink = true
        this.nLinkFlag = item.completeFlag
        this.nLinkPlanId = item.dayPlanId
        this.nLinkRangeParams = {
          mCode: item.lineCode,
          dayPlanId: item.dayPlanId
        }
      }
    },
    // 维修进度
    getRepairCount() {
      getRepairCount().then(response => {
        for (var i in response.data) {
          if (response.data[i].total > 0 && response.data[i].repair > 0) {
            response.data[i].percentage = ((response.data[i].repair / response.data[i].total) * 100).toFixed(2)
          } else {
            response.data[i].percentage = 0
          }
        }
        this.repairProgress = Object.freeze(response.data)
      })
    },
    getImg(item) {
      let icon
      try {
        icon = require(`../../../assets/images/jjxt/gz-home/${item.icon}.png`)
      } catch (err) {
        icon = require(`../../../assets/images/jjxt/gz-home/work-bench-bg.png`)
      }
      return icon
    },
    // 退出登录
    logout() {
      logout({ token: getToken() }).then(() => {
        jumpToLogin()
      })
    },
    beforeOpenDialog() {
      this.dialog.form = {}
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    updateData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.dialog.form.newPwd !== this.dialog.form.newPwdAgain) {
            this.notifiyError('两次输入新密码不一致!')
            return false
          }
          this.dialog.loading = true
          changePwd({
            oldPwd: this.dialog.form.oldPwd,
            newPwd: this.dialog.form.newPwd
          }).then(() => {
            this.notifiySuccess('密码修改成功!')
            this.dialog.loading = false
            this.dialog.visible = false
          }).catch(_ => {
            this.dialog.loading = false
            this.dialog.visible = false
          })
        }
      })
    },
    getRiskWarning(index) {
      return this.dialog6.list[index] || {}
    },
    // 风险预警详情
    showRiskWarning(e) {
      // 通过 e.target获取点击的dom
      // 通过e.target.dataset获取vuedom中的自定义属性
      const data = e.target.dataset
      this.dialog6 = {
        title: '风险预警',
        visible: true,
        list: this.riskWarning,
        index: data.index
      }
    },
    // 通知公告详情
    showNotice(list, index) {
      this.dialog1 = {
        title: '通知公告',
        visible: true,
        list: list,
        index: index
      }
    },
    getNoticeByIndex(index) {
      return this.dialog1.list[index] || {}
    },
    // 待办事项详情
    showTodoList(list, index) {
      this.dialog2 = {
        title: '待办事项',
        visible: true,
        list: list,
        index: index
      }
    },
    getTodoByIndex(index) {
      return this.dialog2.list[index] || {}
    },
    // 重点工作详情
    showKeyworkList(list, index) {
      this.dialog3 = {
        title: '重点工作',
        visible: true,
        list: list,
        index: index
      }
    },
    getKeyworkByIndex(index) {
      return this.dialog3.list[index] || { standard: '' }
    },
    getList() {
      departmentList().then(response => {
        this.depts = Object.freeze(response.data)
      })
      getListByTypeCode({ typeCode: this.publicConfig['054'] }).then(response => {
        this.propertys = Object.freeze(response.data)
      })
    },
    /**
     * 初始化数据
     */
    handleRow(row) {
      Object.keys(this.dialog4.initForm).forEach(item => {
        if (!row[item]) {
          this.$set(row, item, this.dialog4.initForm[item])
        }
      })
    },
    addKeywork() {
      const dialog = {
        title: '添加重点工作',
        visible: true,
        loading: false,
        form: JSON.parse(JSON.stringify(this.dialog4.initForm))
      }
      this.dialog4 = Object.assign(this.dialog4, dialog)
    },
    /** 添加重点工作 */
    updateData1() {
      this.$refs.dataForm1.validate(valid => {
        if (valid) {
          this.dialog4.loading = true
          addKeywork(this.dialog4.form)
            .then(response => {
              this.dialog4.visible = false
              this.dialog4.loading = false
              this.getKeyWork()
              this.notifiySuccess('保存成功')
            })
            .catch(_ => {
              this.dialog4.loading = false
            })
        }
      })
    },
    beforeOpenDialog1() {
      this.$nextTick(() => {
        this.$refs.tinymce.setContent('')
        this.$refs.dataForm1.clearValidate()
      })
    },
    changeDept(vm, data) {
      this.dialog4.form.superviseDept = {
        deptName: data.label,
        deptId: data.id,
        deptCode: data.obj.deptCode,
        parentCode: data.obj.parentCode,
        idPath: data.obj.idPath
      }
    },
    changeDeptList(data) {
      this.dialog4.form.deptList = data.map(item => ({
        deptName: item.label,
        deptId: item.id,
        deptCode: item.obj.deptCode,
        parentCode: item.obj.parentCode,
        idPath: item.obj.idPath
      }))
    },
    addWorkbench() {
      this.applicationCenter = true
      // const dialog = {
      //   title: '添加工作台项目',
      //   visible: true,
      //   loading: false,
      //   form: {}
      // }
      // this.dialog5 = Object.assign(this.dialog5, dialog)
    },
    updateData2() {
      this.$refs.dataForm2.validate(valid => {
        if (valid) {
          this.dialog5.loading = true
          this.dialog5.form.type = 1
          addWorkbench(this.dialog5.form)
            .then(response => {
              this.dialog5.visible = false
              this.dialog5.loading = false
              this.getWorkBench()
              this.notifiySuccess('保存成功')
            })
            .catch(_ => {
              this.dialog5.loading = false
            })
        }
      })
    },
    beforeOpenDialog2() {
      this.$nextTick(() => {
        if (!this.menuList.length) {
          getMenuList().then(response => {
            this.menuList = response.data
          })
        }
        this.$refs.dataForm2.clearValidate()
      })
    },
    deleteWorkbenchApp(e, item) {
      e.stopPropagation()
      this.confirmBox('确定删除？')
        .then(() => {
          deleteWorkBenchApp(item.id).then(response => {
            this.notifiySuccess('删除成功！')
            this.getWorkBench()
          })
        })
        .catch(() => {
          this.chooseApp.isCollection = 1
        })
    },
    deleteWorkbench(e, item) {
      e.stopPropagation()
      this.confirmBox('确定删除?')
        .then(() => {
          deleteWorkbench(item.id).then(response => {
            this.notifiySuccess('删除成功!')
            this.getWorkBench()
          })
        })
        .catch(() => {})
    },
    chooseMenu(data, node) {
      if (node.disabled) return
      const menuPath = []
      this.isStop = false
      this.getMenuPath(data, this.menuList, menuPath)

      const path = require('path')
      this.dialog5.form = Object.assign({}, this.dialog5.form, {
        content: data.label,
        url: isExternal(data.obj.menuPath) ? data.obj.menuPath : menuPath.reduce((result, item) => {
          return item.obj ? path.join(result, item.obj ? item.obj.menuPath : '') : ''
        }, ''),
        menuAttr: data.obj
      })
      this.dialog5.form.url = isExternal(this.dialog5.form.url) || this.dialog5.form.url.startsWith('/') ? this.dialog5.form.url : '/' + this.dialog5.form.url
    },
    getMenuPath(menu, data, path) {
      for (let i = 0; i < data.length; i++) {
        if (this.isStop) break
        if (menu.id === data[i].id) {
          path.push(data[i])
          this.isStop = true
          break
        } else if (data[i].children.length) {
          path.push(data[i])
          this.getMenuPath(menu, data[i].children, path)
        }
      }
      if (!this.isStop) path.pop()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
  $border-color: rgba(14, 47, 248, 0.4);
.home-container{
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 14px;
  .home-header{
    height: 60px;
    line-height: 60px;
    background: #000;
    padding: 0 15px;
    display: flex;
    align-items: center;
    .home-logo{
      height: 60px;
    }
    .home-logo__img{
      width: 26px;
      height: 30px;
      vertical-align: middle;
    }
    .home-logo__text{
      font-size: 30px;
      font-weight: bold;
      margin-left: 5px;
      vertical-align: middle;
    }
    .home-header-nav{
      flex: 1;
      width: 0;
      display: flex;
      align-items: center;
      margin-left: 10px;
      .nav-item{
        padding: 0 20px;
        position: relative;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        &::after{
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 18px;
          background: rgba($color: #fff, $alpha: 0.4);
        }
      }
      .nav-item:last-child{
        &::after{
          display: none;
        }
      }
    }
    .home-header-right-item{
      float: left;
      height: 60px;
      line-height: 60px;
      color: #3678db;
      padding: 0 10px;
      font-size: 14px;
      position: relative;
      &.hover:hover{
        background: #0d132b;
        color: #fff;
      }
      &.pointer{
        cursor: pointer;
      }
      .right-item__person-icon{
        position: absolute;
        top: 18px;
        left: -6px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(../../../assets/images/jjxt/gz-home/home-person-icon.png) no-repeat center 0px;
        background-position: center 0px;
        background-size: cover;
      }
      .right-item__person-name{
        margin: 0 10px;
      }
      .right-item__exit-icon{
        position: absolute;
        top: 22px;
        left: -8px;
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../../../assets/images/jjxt/gz-home/home-exit.png) no-repeat center 0px;
        background-position: center 0px;
        background-size: cover;
      }
      .right-dropdown{
        position: absolute;
        left: 50%;
        top: 100%;
        width: 100%;
        transform: translateX(-50%);
        background: #0d132b;
        color: #3678db;
        z-index: 999;
        .right-dropdown-item{
          height: 45px;
          line-height: 45px;
          padding: 0 20px;
          text-align: center;
          border-top: 1px solid #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &:hover{
            background: #132b5a;
            color: #fff;
          }
        }
        .menu_li {
          text-align: right;
        }
      }
      .show-dropdown-enter-active,
      .show-dropdown-leave-active {
        transition: all 0.28s;
      }
      .show-dropdown-enter,
      .show-dropdown-leave-active {
        top: 80%;
        opacity: 0;
      }
    }
  }
  .home-content{
    flex: 1;
    height: 0;
    background: #0d1229 url(../../../assets/images/jjxt/gz-home/big-screen-bg.png) no-repeat center/100% 100%;
    padding: 10px 10px 0;
    display: flex;
    .empty{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      font-weight: bold;
      color: #394961;
    }
    .home-content-title{
      padding: 15px 10px 5px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-text{
        font-size: 20px;
        font-weight: bold;
      }
      .title-right{
        color: #34a2ed;
        cursor: pointer;
        &:hover{
          color: #0e6bab;
        }
      }
    }
    .home-content-left{
      width: 400px;
      display: flex;
      flex-direction: column;
      .content-days{
        height: 104px;
        padding: 10px 15px;
        margin-bottom: 10px;
        .title-text{
          font-size: 20px;
          font-weight: bold;
        }
        .days-line{
          height: 40px;
          display: flex;
          align-items: center;
          .title-text {
            white-space:nowrap;
          }
          .days-value{
            flex: 1;
            padding-right: 10px;
            text-align: right;
            font-size: 30px;
            font-weight: bold;
            color: #2ea15c;
          }
          .days-unit{
            color: #5fbdfd;
          }
          .days-leader{
            flex: 1;
            margin-left: 20px;
            font-size: 16px;
            text-align: right;
            overflow: hidden;
          }
        }
      }
      .content-risk-warning{
        height: 304px;
        padding: 15px 15px 0;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        .risk-warning-title-right{
          float: right;
          font-size: 16px;
          color: #43aef8;
        }
        .risk-warning-inner{
          flex: 1;
          height: 0;
          margin-top: 10px;
          position: relative;
          .risk-warning-item{
            display: flex;
            align-items: center;
            border-bottom: 1px dashed rgba($color: #0e2ff8, $alpha: 0.4);
            .risk-warning-item-text{
              cursor: pointer;
              line-height: 30px;
              margin-left: 15px;
              padding: 5px 0;
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              &:hover{
                color: #5fbdfd;
              }
            }
          }
        }
      }
      .home-content-todo-list{
        height: 215px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        .todo-list-content{
          flex: 1;
          height: 0;
          padding-bottom: 10px;
          position: relative;
          .todo-list-item{
            height: 40px;
            line-height: 40px;
            margin: 0 10px;
            border-bottom: 1px dashed $border-color;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            &::before{
              content: '';
              display: inline-block;
              width: 5px;
              height: 5px;
              border-radius: 5px;
              background: #fff;
              margin: 0 7px;
              vertical-align: middle;
            }
          }
        }
      }
      .home-content-warning,
      .home-content-notice{
        flex: 1;
        height: 0;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
      }
      .warning-content,
      .notice-content{
        flex: 1;
        height: 0;
        padding-bottom: 10px;
        position: relative;
        .warning-item,
        .notice-item{
          height: 40px;
          line-height: 40px;
          margin: 0 10px;
          border-bottom: 1px dashed $border-color;
          display: flex;
          cursor: pointer;
          .warning-item__text,
          .notice-item__text{
            flex: 1;
            width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover{
              color: #5fbdfd;
            }
            &::before{
              content: '';
              display: inline-block;
              width: 5px;
              height: 5px;
              border-radius: 5px;
              background: #fff;
              margin: 0 7px;
              vertical-align: middle;
            }
          }
          .warning-item__time,
          .notice-item__time{
            font-size: 14px;
            width: 115px;
            margin-left: 10px;
          }
        }
      }
      .home-content-power-supply,
      .home-content-application{
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        padding-left: 15px;
        padding-right: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        &:hover{
          .home-content-nav-icon{
            transform: rotate(180deg);
          }
        }
        .home-content-nav-title{
          font-size: 20px;
          font-weight: bold;
          color: #fff;
        }
        .home-content-nav-icon{
          font-size: 22px;
          color: #43aef8;
          transition: transform .5s;
        }
        .home-content-nav-list{
          position: absolute;
          left: 50%;
          bottom: -9px;
          width: calc(100% + 18px);
          transform: translateX(-50%);
          background-color: #1a284a;
          border: 2px solid #3775d4;
          padding: 0 5px;
          border-radius: 9px;
          z-index: 100;
          .home-content-nav-list-item{
            height: 50px;
            line-height: 50px;
            padding: 0 10px;
            color: #6cadfe;
            border-bottom: 1px dashed #2b5087;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            &::before{
              content: '·';
              font-size: 30px;
              vertical-align: middle;
            }
            &:hover{
              background-color: #2b3e6f;
            }
          }
          .nav-inner-title{
            height: 40px;
            line-height: 40px;
            margin-bottom: 5px;
            padding-left: 15px;
            padding-right: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #07122c;
            border: 2px solid #3775d4;
            border-radius: 9px;
          }
        }
        .nav-show-enter-active,
        .nav-show-leave-active {
          transition: all 0.3s;
        }
        .nav-show-enter,
        .nav-show-leave-active {
          opacity: 0;
        }
      }
    }
    .home-content-right{
      flex: 1;
      width: 0;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      .home-content-right-line{
        height: 215px;
        margin-bottom: 10px;
        display: flex;
        .content-trip{
          flex: 2;
          width: 0;
          .title-text{
            font-size: 20px;
            font-weight: bold;
          }
          .content-substation-trip{
            height: 215px;
            padding: 0 15px;
            display: flex;
            flex-direction: column;
            .substation-trip-title{
              height: 50px;
              border-bottom: 1px dashed $border-color;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .substation-trip-subtitle{
                color: #5fbdfd;
                .subtitle-value{
                  font-size: 20px;
                  font-weight: bold;
                  color: #f42929;
                  padding: 0 5px;
                }
              }
            }
            .substation-trip-content{
              flex: 1;
              height: 0;
            }
            .substation-trip-item{
              width: 100%;
              height: 50px;
              // display: flex;
              // align-items: center;
              .substation-trip-item__text{
                // flex: 1;
                // width: 0;
                cursor: pointer;
                color: #ffffff;
                line-height: 50px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                border-bottom: 1px dashed $border-color;
                &:hover {
                  color: #5fbdfd;
                }
              }
              .substation-trip-item__status{
                display: inline-block;
                width: 90px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                border-radius: 4px;
                font-size: 14px;
              }
            }
          }
        }
        .home-content-keywork{
          flex: 1;
          width: 0;
          display: flex;
          flex-direction: column;
          .keywork-content{
            flex: 1;
            height: 0;
            padding-bottom: 10px;
            .keywork-item{
              height: 40px;
              line-height: 40px;
              margin: 0 15px;
              border-bottom: 1px dashed $border-color;
              display: flex;
              align-items: center;
              cursor: pointer;
              .keywork-item__num{
                display: inline-block;
                width: 25px;
                height: 20px;
                line-height: 20px;
                border-radius: 3px;
                background: #1168a4;
                margin: 0 3px;
                font-size: 12px;
                text-align: center;
              }
              .keywork-item__text{
                flex: 1;
                margin-left: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
        .home-content-workbench{
          width: 600px;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          .workbench-content{
            flex: 1;
            height: 0;
            padding-bottom: 10px;
            overflow: hidden;
            .workbench-item{
              float: left;
              margin: 10px 0 0 5px;
              width: 113px;
              height: 70px;
              background: #164275;
              border: 1px solid #185ea5;
              border-radius: 2px;
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              p{
                width: 100%;
                padding: 0 5px;
                text-align: center;
                margin-top: 10px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              &__delete{
                position: absolute;
                right: 5px;
                top: 5px;
                opacity: 0;
                transition: all 0.3s;
                color: red;
                font-size: 20px;
              }
              &:hover{
                .workbench-item__delete{
                  opacity: 1;
                }
              }
            }
          }
        }
      }
      .home-content-maintenance{
        flex: 1;
        height: 0;
        margin-bottom: 10px;
        padding: 5px;
        display: flex;
        .maintenance-title{
          width: 50px;
          .maintenance-title-item{
            height: 50%;
            border-radius: 9px 0 0 9px;
            color: #727982;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            &.active{
              background: #1a284a;
              color: #fff;
            }
          }
        }
        .maintenance-statistics{
          width: 270px;
          background: #1a284a;
          border-radius: 0 9px 9px 0;
          padding: 0 5px;
          display: flex;
          flex-direction: column;
          &-title{
            padding-top: 10px;
            text-align: center;
          }
          &-thead{
            height: 45px;
            font-weight: bold;
            border-bottom: 1px solid $border-color;
            display: flex;
            align-items: center;
          }
          &-td{
            &.flex{
              flex: 1;
              white-space: nowrap;
            }
            &.w40{
              width: 40px;
              color: #6fa4de;
              text-align: center;
            }
            &.w60{
              width: 75px;
              color: #f8bb00;
              font-weight: bold;
              text-align: center;
            }
          }
          &-body{
            flex: 1;
            height: 0;
            display: flex;
            flex-direction: column;
            .maintenance-statistics-tr{
              flex: 1;
              border-bottom: 1px dashed $border-color;
              display: flex;
              align-items: center;
              &:last-child{
                border: 0;
              }
            }
          }
        }
        .maintenance-detail{
          flex: 1;
          width: 0;
          margin-left: 7px;
          display: flex;
          flex-direction: column;
          .maintenance-detail-thead{
            height: 45px;
            color: #5fbdfd;
            border-bottom: 1px solid $border-color;
            display: flex;
            align-items: center;
          }
          .maintenance-detail-td{
            flex: 1;
            text-align: center;
            padding: 15px 5px;
            line-height: 24px;
            .maintenance-detail-td-text{
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            span{
              display: inline-block;
              white-space: nowrap;
              height: 25px;
              line-height: 25px;
              padding: 0px 6px;
              text-align: center;
              border-radius: 4px;
            }
          }
          .width_110 {
            flex: unset;
            width: 110px;
          }
          .maintenance-detail-body{
            flex: 1;
            height: 0;
            position: relative;
            .maintenance-detail-tr{
              border-bottom: 1px dashed $border-color;
              cursor: pointer;
              display: flex;
              align-items: center;
              &：hover {
                color: #5fbdfd;
              }
              // &:last-child{
              //   border: 0;
              // }
            }
          }
        }
      }
      .home-content-bottom {
        display: flex;
        height: 306px;
        margin-bottom: 10px;
        .home-content-defect-grade {
          width: 600px;
          height: 306px;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          .repair-defect-content {
            flex: 1;
            height: 0;
            position: relative;
            cursor: pointer;
          }
        }
        .home-content-repair-progress{
          width: 880px;
          height: 306px;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          .repair-progress-content{
            flex: 1;
            height: 0;
            position: relative;
          }
        }
      }
    }
  }
}
.el-scrollbar{
  height: 100%;
  /deep/.el-scrollbar__wrap{
    overflow-x: hidden;
  }
}
.home-pwd-dialog{
  /deep/.el-dialog{
    background: #122854;
    .el-dialog__header{
      background: #122854;
      border-bottom-color: #3585d2;
    }
    .el-dialog__body{
      .el-form-item__label{
        color: #fff;
      }
      .el-input__inner{
        background-color: transparent;
        border-color: #3585d2;
        color: #fff;
      }
    }
  }
}
.home-notice-dialog{
  /deep/.el-dialog{
    background: #122854;
    .el-dialog__header{
      background: #122854;
      border-bottom-color: #3585d2;
    }
    .el-dialog__body{
      color: #fff;
      height: calc(90vh - 120px);
      position: relative;
    }
  }
  /deep/.is-fullscreen .el-dialog__body{
    height: calc(100vh - 103px);
  }
  .notice-dialog__title{
    text-align: center;
    &-text{
      font-size: 28px;
      padding: 0 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &-time{
      font-size: 22px;
      margin: 10px 0;
    }
  }
  .notice-dialog__wrapper{
    height: calc(100% - 77px);
    margin: 0 30px;
    border: 1px solid #3585d2;
    border-radius: 9px;
    font-size: 16px;
    line-height: 36px;
    /deep/.el-scrollbar__wrap{
      padding: 20px;
    }
    .notice-dialog__text {
      /deep/table {
        background: unset;
      }
    }
  }
  .notice-dialog__footer{
    display: flex;
    .notice-dialog__prev{
      flex: 1;
      display: flex;
      align-items: center;
      &-text{
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .notice-dialog__next{
      flex: 1;
      display: flex;
      align-items: center;
      &-text{
        flex: 1;
        width: 0;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.home-todo-list-dialog{
  /deep/.el-dialog{
    background: #122854;
    .el-dialog__header{
      background: #122854;
      border-bottom-color: #3585d2;
    }
    .el-dialog__body{
      color: #fff;
      height: calc(90vh - 120px);
      position: relative;
    }
  }
  /deep/.is-fullscreen .el-dialog__body{
    height: calc(100vh - 103px);
  }
  .todo-list-dialog__title{
    text-align: center;
    &-text{
      font-size: 28px;
      padding: 0 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &-time{
      font-size: 22px;
      margin: 10px 0;
    }
  }
  .todo-list-dialog__wrapper{
    height: calc(100% - 77px);
    margin: 0 30px;
    border: 1px solid #3585d2;
    border-radius: 9px;
    font-size: 16px;
    line-height: 36px;
    /deep/.el-scrollbar__wrap{
      padding: 20px;
    }
  }
  .file-down {
    position: absolute;
    bottom: 0px;
    left: 28px;
    cursor: pointer;
    padding: 18px 34px 0;
    font-size: 16px;
    color: #409EFF;
    &:hover {
      color: #ffffff;
      text-decoration-line: underline;
    }
  }
  .todo-list-dialog__footer{
    display: flex;
    .todo-list-dialog__prev{
      flex: 1;
      display: flex;
      align-items: center;
      &-text{
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .todo-list-dialog__next{
      flex: 1;
      display: flex;
      align-items: center;
      &-text{
        flex: 1;
        width: 0;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.home-keywork-dialog{
  /deep/.el-dialog{
    background: #122854;
    .el-dialog__header{
      background: #122854;
      border-bottom-color: #3585d2;
    }
    .el-dialog__body{
      color: #fff;
      height: calc(90vh - 120px);
    }
  }
  /deep/.is-fullscreen .el-dialog__body{
    height: calc(100vh - 103px);
  }
  .keywork-dialog__title{
    text-align: center;
    &-text{
      font-size: 28px;
      padding: 0 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &-time{
      font-size: 22px;
      margin: 10px 0;
    }
  }
  .keywork-dialog__wrapper{
    height: calc(100% - 1px);
    margin: 0 30px;
    font-size: 16px;
    line-height: 36px;
    .keywork-dialog__content{
      border: 1px solid #3585d2;
      border-radius: 9px;
    }
    /deep/.el-scrollbar__wrap{
      padding: 20px;
    }
  }
  .keywork-dialog__footer{
    display: flex;
    .keywork-dialog__prev{
      flex: 1;
      display: flex;
      align-items: center;
      &-text{
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .keywork-dialog__next{
      flex: 1;
      display: flex;
      align-items: center;
      &-text{
        flex: 1;
        width: 0;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.home-keywork-dialog1,
.home-workbench-dialog{
  /deep/.el-dialog{
    background: #122854;
    .el-dialog__header{
      background: #122854;
      border-bottom-color: #3585d2;
    }
    .el-dialog__body{
      .el-form-item__label{
        color: #fff;
      }
      .el-input__inner{
        background-color: transparent;
        border-color: #3585d2;
        color: #fff;
      }
    }
  }
}
.home-workbench-dialog{
  .workbench-menu{
    width: 250px;
    height: calc(80vh - 150px);
    padding-left: 10px;
    overflow: auto;
  }
  .el-tree{
    color: #fff;
    /deep/.el-tree-node{
      > .el-tree-node__children{
        overflow: inherit;
      }
      &:focus{
        > .el-tree-node__content{
          background-color: #204e92;
        }
      }
      .el-tree-node__content{
        &:hover{
          background-color: #204e92;
        }
      }
      &[aria-disabled="true"]{
        &:focus{
          > .el-tree-node__content{
            background: none;
          }
        }
        > .el-tree-node__content{
          cursor: no-drop;
          color: #606266;
          &:hover{
            background: none;
          }
        }
      }
    }
  }
}
.nlink {
  width: 96%;
  height: 92%;
  position: absolute;
  background-color: #081934;
  top: 4%;
  left: 2%;
  border: 2px solid #022954;
  border-radius: 2px;
  z-index: 1;
}
.nlink-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
}
.nlink-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.gis-fade-enter,
.gis-fade-leave-to {
  opacity: 0;
}
.gis-fade-enter-active,
.gis-fade-leave-active {
  transition: opacity 0.5s;
}
.gis-close-button {
  z-index: 1;
  top: 1px;
  right: 3px;
  font-size: 16px;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 5px;
}
.gis-close-button i {
  color: white;
}
.todo-list-dialog__prev-text {
  text-align: right!important;
}
.notice-dialog__prev-text {
  text-align: right!important;
}
</style>
